<template>
    <div class="user">
        <!-- 头部布局 -->
        <div class="user_top" >
            <!-- 头像 -->
            <img :src="headImg" alt="">
            <!-- 显示登录用户 -->
            <h3 v-if="islogined">{{ username }}</h3>
            <h3 v-else="islogined">点击登录</h3>
            <van-icon :name="!islogined ? 'arrow' : 'cross'" @click="loginClick" />

        </div>
        <!-- 模态框 -->
        <div class="modal" v-show="isshowmodal">
            <!-- 遮罩层 -->
            <div class="modal_bg" @click="isshowmodal = false"> </div>
            <div class="modal_content">
                <!-- 表单登录 -->
                <van-form @submit="onSubmit">
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                </van-form>



            </div>

        </div>
        <van-grid :column-num="3">
            <van-grid-item icon="label-o" text="我的订单"  />
            <van-grid-item icon="bill-o" text="优惠券" />
            <van-grid-item icon="goods-collect-o" text="礼品卡" />
            <van-grid-item icon="location-o" text="我的收藏" />
            <van-grid-item icon="flag-o" text="我的足迹" />
            <van-grid-item icon="contact" text="会员福利" />
            <van-grid-item icon="aim" text="地址管理" />
            <van-grid-item icon="warn-o" text="账号安全" />
            <van-grid-item icon="service-o" text="联系客服" />
            <van-grid-item icon="question-o" text="帮助中心" />
            <van-grid-item icon="fire-o" text="意见反馈" />

        </van-grid>

    </div>
</template>
<script>
//引入登录接口
import { loginFn } from '@/utils/http';
//引入头像图片
import headImg from "../assets/images/111.jpg"
export default {
    name: 'User',
    data() {
        return {
            islogined: false, //定义一个登录状态 
            username: '', //登录用户名
            password: '', //密码
            isshowmodal: false,// 是否显示登录模态框
            headImg: headImg,
        }
    },
    components: {
    },
    watch: {},
    methods: {
        //点击提交按钮
        onSubmit(values) {
            loginFn({ username: values["用户名"], pwd: values["密码"] })
                .then((res) => {
                    console.log(res);
                    if (res.data.errno == 0) {
                        //登录成功
                        //01.修改登录状态
                        this.islogined = true;
                        //02.将后端返回的 token 字段 存储到本地
                        localStorage.setItem('token', res.data.data.token);
                        //03.将后端返回的用户信息存到本地
                        localStorage.setItem(
                            "userinfo",
                            JSON.stringify(res.data.data.userInfo)
                        );
                        //04.隐藏模态框
                        this.isshowmodal = false;
                        //将用户信息显示在页面中
                        this.username = res.data.data.userInfo.username;

                    } else {
                        //登录失败
                    }
                })
                .catch((e) => { })
        },
        //点击登录
        loginClick() {
            if (this.islogined) {
                //当前是登录状态，退出登录
                console.log(this);
                this.$dialog.confirm({
                    title: "提示",
                    message: "确认要退出吗?",
                }).then(() => {
                    //点击确定 表示确定退出(注意退出不需要调用接口 而是修改数据)
                    //01.将本地存储的用户信息清除掉
                    localStorage.removeItem("userinfo");
                    localStorage.removeItem("token");
            
                    this.islogined = false
                })
                    .catch(() => {
                        //点击取消
                    })
            } else {
                //当未登录是，显示登录的模态框
                this.username = '',
                    this.isshowmodal = true
            }


        }
    },

    created() {

        //根据本地的存储的用户信息，判断当前是否登录 如果本地存储中有用户信息，说明已登录 否则未登录
        const userinfo = JSON.parse(localStorage.getItem('userinfo'))
        if (userinfo) {
            //说明已登录
            this.islogined = true
            this.username = userinfo.username
        } else {
            //未登录
        }
    },
};
</script>
<style lang="less" scoped>
.user {
    .user_top {
        background: #333;
        color: #fff;
        padding: 20px 10px;
        // box-sizing: border-box;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;

        img {
            border-radius: 50%;
            margin-right: 10px;
            width: 70px;
            height: 70px;
        }

        h3 {
            flex: 1;
        }
    }

    .modal {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 99;
        left: 0;
        top: 0;

        .modal_bg {
            width: 100%;
            height: 100%;
            background: rgb(36, 20, 20);
        }

        .modal_content {
            width: 90%;
            height: 200px;
            position: absolute;
            background: #fff;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding-top: 40px;
        }
    }
}
</style>